import { Menu, Popover } from 'antd';
import React from 'react';
import styles from './index.less';
import { handlerMatomoEvent } from '@/utils/matomo';

const RobotIndex = () => {
  const content = (
    <Menu
      className={styles['service-list']}
      onSelect={({ key }) => {
        if (key === 'item_0') {
          window.open(process.env.itUrl, '_blank');
          handlerMatomoEvent({
            category: 'click',
            action: '咨询',
            name: '投诉建议',
          });
        }
        if (key === 'item_1') {
          window.open(process.env.suggestionUrl, '_blank');
          handlerMatomoEvent({
            category: 'click',
            action: '咨询',
            name: 'IT报事',
          });
        }
      }}
    >
      <Menu.Item>
        <img
          src="https://support.cifi.com.cn/static/isp/supporticon/supporticon/icon_it.png"
          alt="IT系统咨询"
        />
        <div>
          <div className="title">IT系统咨询</div>
          <div className="desc">客服机器人及IT报事</div>
        </div>
      </Menu.Item>
      <Menu.Item>
        <img
          src="https://support.cifi.com.cn/static/isp/supporticon/supporticon/icon_feedback.png"
          alt="建议投诉"
        />
        <div>
          <div className="title">建议投诉</div>
          <div className="desc">表达IT建议或投诉</div>
        </div>
      </Menu.Item>
    </Menu>
  );

  return (
    <div className={styles.sidebar}>
      <Popover placement="left" content={content}>
        <div className="custom-container">
          <img
            src="https://support.cifi.com.cn/static/isp/supporticon/supporticon/icon_support.png"
            alt="咨询"
          />
          <span>咨询</span>
        </div>
      </Popover>
    </div>
  );
};

export default RobotIndex;
